<template>
  <div class="title-left-wrap">
    <div class="title-left-container">
      <!-- <img class="logo-style"
           src="@/assets/img/logo.png"
           alt=""> -->
      <div class="title-left-box">
        <!-- <router-link :to="{name:'index'}"> -->
        <div class="title-left-text">{{ title }}</div>
        <!-- </router-link> -->
      </div>
    </div>
    <div class="title-center-container">
      <div class="title-center-list" v-for="i in 4" :key="i">
        <router-link
          :to="{ name: 'example2' }"
          class="title-center-defaultStyle"
        >
          <div class="title-center-menu">页面</div>
        </router-link>
      </div>
    </div>
    <div class="title-right-container">
      <div class="title-right-date">
        {{ date }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      date: null
    };
  },
  created() {
    this.setTime();
  },
  mounted() {},
  computed: {},
  methods: {
    setTime() {
      let NowTime = () => {
        //获取年月日
        var time = new Date();
        var year = time.getFullYear();
        var month = time.getMonth() + 1;
        var day = time.getDate();
        //获取时分秒
        var h = time.getHours();
        var m = time.getMinutes();
        var s = time.getSeconds();
        //检查是否小于10
        month = this.check(month);
        day = this.check(day);
        h = this.check(h);
        m = this.check(m);
        s = this.check(s);
        let newDate = { year, month, day, h, m, s };
        this.date =
          year + "." + month + "." + day + ` ` + h + ":" + m + ":" + s;
        setTimeout(NowTime, 1000);
      };
      NowTime();
    },
    //时间数字小于10，则在之前加个“0”补位。
    check(i) {
      var num;
      i < 10 ? (num = "0" + i) : (num = i);
      return num;
    }
  },
  watch: {}
};
</script>

<style lang="scss">
.title-left-wrap {
  background: url("../../../assets/img/titleLeft/titleleft.png") no-repeat;
  //   background-size: 100% 100%;
  background-position: top left;
  height: 80px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .title-left-container {
    margin-left: 20px;
    box-sizing: border-box;
    font-size: 20px;
    display: flex;
    align-items: center;
    .logo-style {
      width: 50px;
      height: 50px;
    }
    .title-left-box {
      margin-left: 10px;
      box-sizing: border-box;
      //   a {
      //     text-decoration: none;
      //   }
      .title-left-text {
        font-weight: bold;
        cursor: pointer;
        letter-spacing: 8px;
        text-align: center;
        background-image: -webkit-linear-gradient(top, #ffffff, #5fb2ff);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        font-size: 30px;
        font-style: italic;
      }
    }
  }
  .title-center-container {
    display: flex;
    justify-content: space-around;
    width: 42%;
    .title-center-list {
      width: 20%;
      height: 50px;
      a {
        width: 100%;
        text-decoration: none;
        height: 50px;
        display: inline-block;
      }
      .title-center-defaultStyle {
        background: url("../../../assets/img/titleLeft/title_left_default.png")
          no-repeat;
        background-position: center center;
        // background-size: 100% 100%;
      }
      .router-link-active {
        background: url("../../../assets/img/titleLeft/title_left_active.png")
          no-repeat;
        background-position: center center;
        // background-size: 100% 100%;
      }
      .title-center-menu {
        font-weight: bold;
        cursor: pointer;
        letter-spacing: 4px;
        text-align: center;
        background-image: -webkit-linear-gradient(top, #ffffff, #5fb2ff);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        font-size: 20px;
        font-style: italic;
        width: 100%;
        line-height: 50px;
        height: 50px;
      }
    }
  }
  .title-right-container {
    margin-right: 20px;
    box-sizing: border-box;
    .title-right-date {
      font-weight: bold;
      cursor: pointer;
      letter-spacing: 4px;
      text-align: center;
      background-image: -webkit-linear-gradient(top, #ffffff, #5fb2ff);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      font-size: 20px;
      font-style: italic;
    }
  }
}
</style>
